<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 400px;
            height: 400px;
            border: 5px solid black;
            position: relative;
        }

        .wrap .min {
            width: 100%;
        }

        .min_wrap {
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left: 0;
            top: 0;
            opacity: .5;
            /*透明度*/
            display: none;
        }

        .wrap .max_wrap {
            border: 5px solid black;
            position: absolute;
            top: -5px;
            left: 405px;
            width: 500px;
            height: 500px;
            overflow: hidden;
            display: none;
        }

        .wrap .max_wrap img {
            position: absolute;
            left: 0;
            top: 0;
            /*width: 1334px;*/
        }
    </style>
</head>

<body>
    <div class="wrap">
        <img class="min" src="images/small.png">
        <div class="min_wrap"></div>
        <div class="max_wrap">
            <img class="max" src="images/big.jpg" alt="">
        </div>
    </div>
</body>
<script type="text/javascript">
    var wrap = document.querySelector(".wrap"); //大图
    var min_img = document.querySelector(".min"); //小图
    var min_wrap = document.querySelector(".min_wrap"); //小图宽
    var max_img = document.querySelector(".max"); //大图
    var max_wrap = document.querySelector(".max_wrap"); //大图宽

    wrap.onmouseenter = function () {
        max_wrap.style.display = "block";
        min_wrap.style.display = "block";
    }
    wrap.onmouseleave = function () {
        max_wrap.style.display = "none";
        min_wrap.style.display = "none";

    }
    wrap.onmousemove = function (e) {
        var e = e || window.event;
        var x = e.clientX - min_wrap.offsetWidth / 2 - 5;
        var y = e.clientY - min_wrap.offsetHeight / 2 - 5;
        //判断左右不超出wrap框
        if (x < 0) {
            x = 0
        } else if (x > wrap.clientWidth - min_wrap.offsetWidth) {
            x = wrap.clientWidth - min_wrap.clientWidth;
        }

        //判断上下不超出wrap框
        if (y < 0) {
            y = 0
        } else if (y > wrap.clientHeight - min_wrap.clientHeight) {
            y = wrap.clientHeight - min_wrap.clientHeight;
        }
        min_wrap.style.left = x + "px";
        min_wrap.style.top = y + "px";
        //改变大图的位置
        var scale = max_wrap.clientWidth / min_wrap.clientWidth;
        max_img.style.left = -x + "px";
        max_img.style.top = -y + "px";
    }
</script>

</html>